<!--
 * @Author: elfsigin 2714838232@qq.com
 * @Date: 2024-11-16 08:34:07
 * @LastEditors: 来璐 2714838232@qq.com
 * @LastEditTime: 2024-11-17 20:12:00
 * @FilePath: \VUE3-ELEMENT-PLUS\manager-pei\src\components\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: elfsigin 2714838232@qq.com
 * @Date: 2024-11-15 15:32:41
 * @LastEditors: elfsigin 2714838232@qq.com
 * @LastEditTime: 2024-11-16 10:23:47
 * @FilePath: \VUE3-ELEMENT-PLUS\manager-pei\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script >
import {User,View} from '@element-plus/icons-vue'
export default{
  name:'Login',
  data(){
    return{
      user:{
        userName:'',
        userPwd:''
      },
      rules:{
        userName:[{required:true,message:"请输入用户名",trigger:"blur"}],
        userPwd:[{required:true,message:"请输入密码",trigger:"blur"}]
      }
    }
  },
  computed:{
    userS(){
      return User
    },
    viewS(){
      return View
    }
  },
  mounted(){
    // this.$storage.setItem('user',{name:'zhangsan',age:18})
   },
  methods: {
    goHome(){
      this.$router.push("/welcome")
    },
    login(){
      this.$refs.userForm.validate((res)=>{
       if(res){
        console.log(res);
        console.log(1);
        
        this.$api.login(this.user).then((res)=>{
          console.log(res);
          this.$store.commit('saveUserInfo',res)
          this.$router.push('/welcome') 
        })
       }
        
      })
    }
  },
  
  
    
};

</script>

<template>
<div class="login-wrapper">
  <div class="modal">
    <el-form :model="user" :rules="rules" status-icon ref="userForm">
      <div class="title">登录页</div>
      <el-form-item prop="userName">
        <el-input type="text" :prefix-icon="userS" v-model="user.userName"/>
      </el-form-item>
      <el-form-item prop="userPwd">
        <el-input type="password" :prefix-icon="viewS" v-model="user.userPwd"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn-login" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>


</template>

<style scoped lang="scss">
.login-wrapper{
 display: flex;
 justify-content: center;
 align-items: center;
 background: #f9f9f9;
 width: 100vw;
 height: 100vh;
 .modal{
  width: 500px;
  padding:35px;
  background: #fff;
  box-shadow: 0px 0px 10px 3px #c7c0cb4d;
  .title{
    font-size: 35px;
    line-height: 1.5;
    text-align: center;
  }
  .btn-login{
   width: 100%;
  }

 }
}

</style>
 